<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>OpenLayers v8.2.0 API - Index</title>
  <script src="scripts/prettify/prettify.js"></script>
  <script src="scripts/prettify/lang-css.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
    crossorigin="anonymous"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="styles/prettify-tomorrow.css">
  <link rel="stylesheet" type="text/css" href="styles/jaguar.css">
  <link rel="stylesheet" type="text/css" href="styles/carbon.css">
  <link rel="stylesheet" type="text/css" href="/theme/ol.css">
  <link rel="stylesheet" type="text/css" href="/theme/site.css">
</head>

<body>
  <header class="navbar navbar-expand-sm navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
    <a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70"
        alt="">&nbsp;OpenLayers</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu"
      aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- menu items that get hidden below 768px width -->
    <nav class="collapse navbar-collapse" id="olmenu">
      <ul class="nav navbar-nav ms-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">Docs</a>
          <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
            <a class="dropdown-item" href="/doc/">Docs</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>快速入门</a>
            <a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>常见问题</a>
            <a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>教程</a>

          </div>
        </li>
        <li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button" data-bs-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-sitemap me-1"></i>API
          </a>
          <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
            <a class="dropdown-item" href="/en/latest/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v8.2.0
              (latest)</a </div>
        </li>
      </ul>
    </nav>
  </header>

  <div class="container-fluid">
    <div id="wrap" class="row">
      <div class="navigation col-md-4 col-lg-3">
        <div class="search-wrapper">
          <div class="search">
            <input id="search" type="text" autocomplete="off" class="form-control input-sm"
              placeholder="Search Documentation">
          </div>
        </div>
        <div class="navigation-list-wrapper">
          <ul class="navigation-list search-empty">
            <li class="loading">Loading …
          </ul>
        </div>
      </div>

      <div class="main col-md-8 col-lg-9">
        <h1 class="page-title" data-filename="index.html">Index</h1>
        <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
          <button id="latest-dismiss" type="button" class="btn-close" data-bs-dismiss="alert"
            aria-label="Close"></button>
          This documentation is for OpenLayers v<span id="package-version">8.2.0</span>. The <a id="latest-link"
            href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
        </div>
        <section>
          <article class="readme">
            <div class="row mb-3">
              <div class="col-xl-4 col-lg-6 py-3">
                <div class="card h-100 bg-light">
                  <div class="card-body">
                    <h4 class="card-title">Map</h4>
                    <p><a href="module-ol_Map-Map.html">地图（map）</a>由 <a
                        href="module-ol_layer_Base-BaseLayer.html">图层（layers）</a>、<a
                        href="module-ol_View-View.html">视图（view）</a>、<a
                        href="module-ol_interaction_Interaction-Interaction.html">交互{interactions}</a>
                      以及<a
                        href="module-ol_control_Control-Control.html">UI组件控件(controls)</a>构成。图层主要作为数据的容器，视图主要用于可视化操作，交互主要用于修改地图内容，控件主要实现一些地图功能。
                    </p>
                    <a href="module-ol_Map-Map.html">地图对象属性总览（Overview）</a><br>
                    <a href="module-ol_Map-Map.html#Map">地图对象创建（Creation）</a><br>
                    <a href="module-ol_MapBrowserEvent-MapBrowserEvent.html">地图对象事件（Events）</a>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-lg-6 py-3">
                <div class="card h-100 bg-light">
                  <div class="card-body">
                    <h4 class="card-title">View</h4>
                    <p>视图对象管理地图视图的可视化参数，比如分辨率和旋转等。</p>
                    <a href="module-ol_View-View.html">View</a>参数包括中心点（center）、投影（projection）、
                    分辨率（resolution）和旋转（rotation）等。
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-lg-6 py-3">
                <div class="card h-100 bg-light">
                  <div class="card-body">
                    <h4 class="card-title">Layers</h4>
                    <p>层是从数据源获取数据的轻量级容器。 图层是数据管理的轻量级容器，其中数据主要来自 <a
                        href="module-ol_source_Source-Source.html">数据源对象（sources）</a>.</p>
                    <a href="module-ol_layer_Tile-TileLayer.html">ol/layer/Tile（瓦片图层）</a><br>
                    <a href="module-ol_layer_Image-ImageLayer.html">ol/layer/Image（图像图层）</a><br>
                    <a href="module-ol_layer_Vector-VectorLayer.html">ol/layer/Vector（矢量图层）</a><br>
                    <a href="module-ol_layer_VectorImage-VectorImageLayer.html">ol/layer/VectorImage（矢量图像图层）</a><br>
                    <a href="module-ol_layer_VectorTile-VectorTileLayer.html">ol/layer/VectorTile（矢量瓦片图层）</a><br>
                    <a href="module-ol_layer_WebGLTile-WebGLTileLayer.html">ol/layer/WebGLTile（WebGL瓦片图层）</a>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-lg-6 py-3">
                <div class="card h-100 bg-light">
                  <div class="card-body">
                    <h4 class="card-title">Controls</h4>
                    <a href="module-ol_control_defaults.html#.defaults">地图默认控件</a><br>
                    <a href="module-ol_control_Control-Control.html">所有控件</a>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-lg-6 py-3">
                <div class="card h-100 bg-light">
                  <div class="card-body">
                    <h4 class="card-title">Interactions</h4>
                    <a href="module-ol_interaction_defaults#.defaults">地图默认交互</a><br>
                    Interactions for <a href="module-ol_Feature-Feature.html">矢量图形要素交互</a>
                    <ul>
                      <li><a href="module-ol_interaction_Select-Select.html">ol/interaction/Select（选中）</a></li>
                      <li><a href="module-ol_interaction_Draw-Draw.html">ol/interaction/Draw（标绘）</a></li>
                      <li><a href="module-ol_interaction_Modify-Modify.html">ol/interaction/Modify（编辑）</a></li>
                    </ul>
                    <a href="module-ol_interaction_Interaction-Interaction.html">所有交互</a>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-lg-6 py-3">
                <div class="card h-100 bg-light">
                  <div class="card-body">
                    <h4 class="card-title">Sources and formats</h4>
                    <a href="module-ol_source_Tile-TileSource.html">瓦片资源(Tile sources)</a> for <a
                      href="module-ol_layer_Tile-TileLayer.html">ol/layer/Tile</a> or <a
                      href="module-ol_layer_WebGLTile-WebGLTileLayer.html">ol/layer/WebGLTile</a>
                    <br><a href="module-ol_source_Image-ImageSource.html">图像资源(Image sources)</a> for <a
                      href="module-ol_layer_Image-ImageLayer.html">ol/layer/Image</a>
                    <br><a href="module-ol_source_Vector-VectorSource.html">矢量资源(Vector sources)</a> for <a
                      href="module-ol_layer_Vector-VectorLayer.html">ol/layer/Vector</a>
                    <br><a href="module-ol_source_VectorTile-VectorTile.html">矢量瓦片资源(Vector tile sources)</a> for <a
                      href="module-ol_layer_VectorTile-VectorTileLayer.html">ol/layer/VectorTile</a>
                    <br>读取/写入矢量数据的<a href="module-ol_format_Feature-FeatureFormat.html">格式(Formats)</a>
                    <br><a href="module-ol_format_WMSCapabilities-WMSCapabilities.html">ol/format/WMSCapabilities</a>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-lg-6 py-3">
                <div class="card h-100 bg-light">
                  <div class="card-body">
                    <h4 class="card-title">投影（Projections）</h4>
                    <p>所有的坐标和范围需要在视图投影中提供。要将坐标从投影坐标转为地理坐标，请使用 <a href="module-ol_proj.html#.fromLonLat">fromLonLat()</a>
                      和 <a href="module-ol_proj.html#.toLonLat">toLonLat()</a>. 对于四至范围（extents）和其他投影数据，可以使用<a
                        href="module-ol_proj.html#.transformExtent">transformExtent()</a> and <a
                        href="module-ol_proj.html#.transform">transform()</a>.</p>
                    <p>更多详细方法请访问 <a href="module-ol_proj.html">ol/proj</a> 模块。</p>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-lg-6 py-3">
                <div class="card h-100 bg-light">
                  <div class="card-body">
                    <h4 class="card-title">可观测对象（Observable objects）</h4>
                    <p>所有<a href="module-ol_Object-BaseObject.html">Object</a>s 的更改可以通过调用
                      <a href="module-ol_Object-BaseObject.html#on">object.on('propertychange')</a> 方法来观察。
                      侦听器接收一个 <a href="module-ol_Object.ObjectEvent.html">ObjectEvent</a> ，其中包含有关已更改属性和旧值的信息。
                    </p>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-lg-6 py-3">
                <div class="card h-100 bg-light">
                  <div class="card-body">
                    <h4 class="card-title">Other components</h4>
                    <a href="module-ol_Geolocation.html">ol/Geolocation（地理定位）</a><br>
                    <a href="module-ol_Overlay-Overlay.html">ol/Overlay（覆盖物-气泡框）</a><br>
                  </div>
                </div>
              </div>
            </div>
            <h3 class="mb-3">API 改变策略</h3>
            OpenLayers API 由以下组成
            <ul>
              <li>构造者的姓名和签名</li>
              <li>实例方法和属性的名称和签名</li>
              <li>函数的名称和签名</li>
              <li>常量的名称</li>
            </ul>
            <p>在主版本系列中，API不会被更改。 对API的任何更改都将伴随着一个新的主版本。</p>
            <p class="text-danger">注意:API更改策略不包括用于样式化OpenLayers UI的CSS类名。它也不包括任何类型和枚举。</p>
          </article>
        </section>





      </div>
    </div>
  </div>
  <script>prettyPrint();</script>
  <script src="scripts/linenumber.js"></script>
  <script src="scripts/main.js"></script>
</body>

</html>